/*
* iziToast | v1.4.0
* http://izitoast.marcelodolce.com
* by Marcelo Dolce.
*/

.iziToast-capsule
  font-size 0
  height 0
  width 100%
  transform translateZ(0)
  backface-visibility hidden
  transition transform 0.5s cubic-bezier(.25,.8,.25,1), height 0.5s cubic-bezier(.25,.8,.25,1)
  
  &, & *
    box-sizing border-box

.iziToast-overlay
  display block
  position fixed
  top -100px
  left 0
  right 0
  bottom -100px
  z-index 997
  
.iziToast
  display inline-block
  clear both
  position relative
  font-family $fonts
  font-size 14px
  padding 8px 45px 9px 0
  background rgba(238, 238, 238, 0.9)
  border-color rgba(238, 238, 238, 0.9)
  width 100%
  pointer-events all
  cursor default
  transform translateX(0)
  -webkit-touch-callout none /* iOS Safari */
  -webkit-user-select none /* Chrome/Safari/Opera */
  -khtml-user-select none /* Konqueror */
  -moz-user-select none /* Firefox */
  -ms-user-select none /* Internet Explorer/Edge */
  user-select none
  min-height 54px

  & > .iziToast-progressbar
    position absolute
    left 0
    bottom 0
    width 100%
    z-index 1
    background rgba(255,255,255,0.2);

    & > div
      height 2px
      width 100%
      background rgba(0,0,0,0.3);
      border-radius 0 0 3px 3px

  &.iziToast-balloon
    &:before
      content ''
      position absolute
      right 8px
      left auto
      width 0px
      height 0px
      top: 100%;
      border-right 0px solid transparent
      border-left 15px solid transparent
      border-top 10px solid black
      border-top-color inherit
      border-radius 0
    & .iziToast-progressbar
      top 0
      bottom auto
    & > div
      border-radius 0 0 0 3px

  & > .iziToast-cover
    position absolute
    left 0
    top 0
    bottom 0
    height 100%
    margin 0
    background-size 100%
    background-position 50% 50%
    background-repeat no-repeat
    background-color rgba(0, 0, 0, 0.1)
    
  & > .iziToast-close
    position absolute
    right 0
    top 0
    border 0
    padding 0
    opacity 0.6
    width 42px
    height 100%
    background url('') no-repeat 50% 50%
    background-size 8px
    cursor pointer
    outline none
    
    &:hover
      opacity 1
      
  & > .iziToast-body
    position relative
    padding 0 0 0 10px
    height auto
    min-height 36px
    margin 0 0 0 15px
    text-align left
    
    &:after
      content ""
      display table
      clear both
      
    & .iziToast-texts
      margin 10px 0 0 0
      padding-right 2px
      display inline-block
      float left
    
    & .iziToast-inputs
      min-height 19px
      float left
      margin 3px -2px

      & > input:not([type=checkbox]):not([type=radio]), & > select
        position relative
        display inline-block
        margin 2px
        border-radius 2px
        border 0
        padding 4px 7px
        font-size 13px
        letter-spacing 0.02em
        background rgba(0, 0, 0, 0.1)
        color rgb(0, 0, 0)
        box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2);
        min-height 26px
        &:hover
          // background rgba(0, 0, 0, 0.2)
        &:focus
          box-shadow 0 0 0 1px rgba(0, 0, 0, 0.6);

    & .iziToast-buttons
      min-height 17px
      float left
      margin 4px -2px
      
      & > a, & > button, & > input:not([type=checkbox]):not([type=radio])
        position relative
        display inline-block
        margin 2px
        border-radius 2px
        border 0
        padding 5px 10px
        font-size 12px
        letter-spacing 0.02em
        cursor pointer
        background rgba(0, 0, 0, 0.1)
        color rgb(0, 0, 0)
        &:hover
          background rgba(0, 0, 0, 0.2)
        &:focus
          box-shadow 0 0 0 1px rgba(0, 0, 0, 0.6);
        &:active
          top 1px
        
    & .iziToast-icon
      height 100%
      position absolute
      left 0
      top 50%
      display table
      font-size 23px
      line-height 24px
      margin-top -12px
      color black
      width 24px
      height 24px

      &.ico-info
          background url('') no-repeat 50% 50%
          background-size 85%
      &.ico-warning
          background url('') no-repeat 50% 50%
          background-size 85%
      &.ico-error
          background url('') no-repeat 50% 50%
          background-size 80%
      &.ico-success
          background url('') no-repeat 50% 50%
          background-size 85%
      &.ico-question
          background url('') no-repeat 50% 50%
          background-size 85%
      
    & .iziToast-title
      padding 0
      margin 0
      line-height 16px
      font-size 14px
      text-align left
      float left
      color black
      white-space normal
      
    & .iziToast-message
      padding 0
      margin 0 0 10px 0
      font-size 14px
      line-height 16px
      text-align left
      float left
      color rgba(0, 0, 0, 0.6)
      white-space normal
      
  &.iziToast-animateInside
    .iziToast-title, .iziToast-message, .iziToast-icon, .iziToast-buttons-child, .iziToast-inputs-child
      opacity 0

.iziToast-target
  position relative
  width 100%
  margin 0 auto
  & .iziToast-capsule
    overflow hidden
    &:after
      visibility hidden
      display block
      font-size 0
      content " "
      clear both
      height 0
    & .iziToast
      width 100%
      float left

.iziToast-wrapper
  z-index 99999
  position fixed
  width 100%
  pointer-events none
  display flex
  flex-direction column
  & .iziToast.iziToast-balloon
    &:before
      border-right 0 solid transparent
      border-left 15px solid transparent
      border-top 10px solid black
      border-top-color inherit
      right 8px
      left auto

&.iziToast-wrapper-bottomLeft
  left 0
  bottom 0
  text-align left
  & .iziToast.iziToast-balloon
    &:before
      border-right 15px solid transparent
      border-left 0 solid transparent
      right auto
      left 8px

&.iziToast-wrapper-bottomRight
  right 0
  bottom 0
  text-align right
&.iziToast-wrapper-topLeft
  left 0
  top 0
  text-align left
  & .iziToast.iziToast-balloon
    &:before
      border-right 15px solid transparent
      border-left 0 solid transparent
      right auto
      left 8px

&.iziToast-wrapper-topRight
  top 0
  right 0
  text-align right
&.iziToast-wrapper-topCenter
  top 0
  left 0
  right 0
  text-align center
&.iziToast-wrapper-bottomCenter
  bottom 0
  left 0
  right 0
  text-align center
&.iziToast-wrapper-center
  top 0
  bottom 0
  left 0
  right 0
  text-align center
  justify-content center
  flex-flow column
  align-items center

&.iziToast-rtl
  direction rtl
  padding 8px 0 9px 45px
  font-family $fontsRtl
  & .iziToast-cover
    left auto
    right 0
  & .iziToast-close
    right auto
    left 0
  & .iziToast-body
    padding 0 10px 0 0
    margin 0 16px 0 0
    text-align right
    & .iziToast-buttons, & .iziToast-inputs, & .iziToast-texts, & .iziToast-title, & .iziToast-message
      float right
      text-align right
    & .iziToast-icon
      left auto
      right 0
  

@media only screen and (min-width: 568px)

  .iziToast-wrapper
    padding 10px 15px
    
  .iziToast
    margin 5px 0
    border-radius 3px
    width auto
    &:after
      content ''
      z-index -1
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      border-radius 3px
      box-shadow inset 0 -10px 20px -10px rgba(0,0,0,0.2),inset 0 0 5px rgba(0,0,0,0.1),0 8px 8px -5px rgba(0, 0, 0, 0.25)
      
    &:not(.iziToast-rtl)
      .iziToast-cover
        border-radius 3px 0 0 3px
      
    &.iziToast-rtl
      .iziToast-cover
        border-radius 0 3px 3px 0
      
    &.iziToast-color-dark
      &:after
        box-shadow inset 0 -10px 20px -10px rgba(255, 255, 255, 0.3),0 10px 10px -5px rgba(0, 0, 0, 0.25)
      
    &.iziToast-balloon
      & .iziToast-progressbar
        background transparent
      &:after
        box-shadow 0 10px 10px -5px rgba(0,0,0,0.25), inset 0 10px 20px -5px rgba(0,0,0,0.25)

  .iziToast-target .iziToast
    &:after
      box-shadow inset 0 -10px 20px -10px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.1)
  